<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted } from 'vue'
import { Api } from '@/assets/apis';
import type { MaleClassify } from '@/typings'
import { Toast } from 'vant';

const route = useRoute()
const router = useRouter()
const show = ref(false)
const MaleClassify = ref<Array<MaleClassify>>([])
const title = ref()
const id = ref()
id.value = route.params.id
title.value = route.query.title


onMounted(async () => {
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
    });
    let { data } = await Api.getPublishBook(id.value)
    MaleClassify.value = data.data.books
    console.log(MaleClassify.value);
    show.value = true
    Toast.clear()
})

const read = (id: string, title: string) => {
    router.push(`/book/${id}?title=${title}`)
}

</script>

<template>
    <div v-if="show">
        <div class="header">
            <div class="back" @click="router.go(-1)">
                <van-icon name="arrow-left" />
            </div>
            <div class="title">{{ title }}</div>
            <div class="home" @click="router.push('/')">首页</div>
        </div>
        <div class="list" v-for="a in MaleClassify" @click="read(a.sourceUrl.slice(8), a.title)">
            <div class="poster">
                <img :src="a.iconUrl" alt="">
            </div>
            <div class="text">
                <p class="list-title">{{ a.title }}</p>
                <p class="author">{{ a.author }}</p>
                <p class="read-count">{{ a.readCount }}人阅读</p>
                <p class="desc">{{ a.description }}</p>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.header {
    width: 375rem;
    height: 44rem;
    background-color: #E64D2E;
    display: flex;
    color: #fff;
    justify-content: space-between;
    align-items: center;
    font-size: 18rem;

    .back {
        font-size: 20rem;
        margin-left: 15rem;
    }

    .home {
        font-size: 14rem;
        padding-right: 15rem;
    }
}

.list {
    width: 345rem;
    height: 88rem;
    padding: 15rem 15rem 15rem 0;
    border-bottom: 1rem solid #dcdcdc;
    margin-left: 15rem;
    display: flex;

    .poster {
        width: 64rem;
        height: 88rem;
        margin-right: 10rem;

        img {
            width: 100%;
        }
    }

    .text {
        width: 271rem;
        color: #aaa;

        .list-title {
            font-size: 16rem;
            padding-bottom: 2rem;
            color: #1d2c33;
            line-height: 18rem;
            width: 271rem;
            height: 18rem;
        }

        .author {
            line-height: 16rem;
            height: 16rem;
            font-size: 12rem;
        }

        .read-count {
            line-height: 16rem;
            height: 16rem;

        }

        .desc {
            height: 32rem;
            line-height: 16rem;
            font-size: 14rem;
            padding-top: 4rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
}
</style>